<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智慧社区后台</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/AdminLTE.min.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/plugins/bootstrap-table/css/bootstrap-table.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap-switch/css/bootstrap-switch.min.css" />
<link href="${pageContext.request.contextPath}/plugins/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" />
</head>
<style>
</style>
<body style="padding-bottom: 90px; background-color: #FFF;">
	<div id="applyModal" >
		<div class="modal-body">
			<div class="form-group">
				<label class="control-label">姓名：<span style="color:#F00">*</span></label> <input type="text" class="form-control" id="name">
			</div>
			<div class="form-group">
				<label class="control-label">性别：<span style="color:#F00">*</span></label> <select id="gender" class="form-control">
					<option value="男">男</option>
					<option value="女">女</option>
				</select>
			</div>
			<div class="form-group">
				<label class="control-label">身份证号：<span style="color:#F00">*</span></label> <input type="text" class="form-control" id="idCard">
			</div>
			<div class="form-group">
				<label class="control-label">与业主关系：<span style="color:#F00">*</span></label> <input type="text" class="form-control" id="status">
			</div>
			<div class="form-group">
				<label class="control-label">联系电话：<span style="color:#F00">*</span></label> <input type="text" class="form-control" id="tel">
			</div>
			<div class="form-group">
				<label class="control-label">紧急联系人：</label> <input type="text" class="form-control" id="emergencyContact">
			</div>
			<div class="form-group">
				<label class="control-label">紧急联系人电话：</label> <input type="text" class="form-control" id="emergencyContactTel">
			</div>
			<div class="modal-header">
				<h4 class="modal-title" style="text-align: center;">房屋信息</h4>
			</div>
			
			<div class="form-group">
				<label class="control-label">期数：</label> <select id="numberPeriods" class="form-control" onchange="numberPeriodsChange()">
					<option value="">请选择...</option>
				</select>
			</div>
			<div class="form-group">
				<label class="control-label">楼栋：</label> <select id="building" class="form-control" onchange="buildingChange()">
				<option value="">请选择...</option>
				</select>
			</div>
			<div class="form-group">
				<label class="control-label">单元：</label> <select id="unit" class="form-control" onchange="unitChange()">
					<option value="">请选择...</option>
				</select>
			</div>
			<div class="form-group">
					<label class="control-label">房间号:</label> <select id="doorCard" class="selectpicker form-control" data-live-search="true" data-live-search-placeholder="搜索">
					<option value="">请选择...</option>
					</select>
			</div>
		</div>
	</div>

</body>
<script src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-switch/js/bootstrap-switch.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-zh-CN.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-export.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/tableExport.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-toolbar.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-filter-control.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-select/js/bootstrap-select.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-select/js/i18n/defaults-zh_CN.min.js"></script>
<script src="${pageContext.request.contextPath}/js/ajaxfileupload.js"></script>
<!-- layer -->
<script src="${pageContext.request.contextPath}/plugins/layer/2.4/layer.js"></script>
<script src="${pageContext.request.contextPath}/plugins/laydate/laydate.js"></script>
<script src="${pageContext.request.contextPath}/js/date.js"></script>
<script>
	var id="${map['id']}";
	var index = parent.layer.getFrameIndex(window.name);
	 $(function() {
		 $.ajax({
				url : "${pageContext.request.contextPath}/selectHouseData",
				type : "post",
				dataType : "json",
				success : function(data) {
					var periods = data['numberPeriods'];
					var building=data['building'];
					var unit=data['unit'];
					var doorCard=data['doorCard'];
					var periodshtml = "<option value=''>请选择...</option>";
					var buildinghtml = "<option value=''>请选择...</option>";
					var unithtml = "<option value=''>请选择...</option>";
					var doorCardHtml = "<option value=''>请选择...</option>";
					for (var i = 0; i < periods.length; i++) {
						periodshtml += "<option value='"+periods[i].numberPeriods+"'>" + periods[i].numberPeriods + "</option>";
					}
					for (var i = 0; i < building.length; i++) {
						buildinghtml += "<option value='"+building[i].building+"'>" + building[i].building + "</option>";
					}
					for (var i = 0; i < unit.length; i++) {
						unithtml += "<option value='"+unit[i].unit+"'>" + unit[i].unit + "</option>";
					}
					for (var i = 0; i < doorCard.length; i++) {
						doorCardHtml += "<option value='"+doorCard[i].doorCard+"'>" + doorCard[i].doorCard + "</option>";
					}
					$("#numberPeriods").html(periodshtml);
					$("#building").html(buildinghtml);
					$("#unit").html(unithtml);
					$("#doorCard").html(doorCardHtml);
					$('.selectpicker').selectpicker('refresh');
					if(id!=''){
						test();
					}
				},
				error : function() {
					layer.msg('系统繁忙，请稍后再试!', {
						icon : 2,
						time : 800
					});
				}
			});
	});
	 function test(){
		//debugger;
			$.ajax({
				url : "${pageContext.request.contextPath}/selectMemberDetails",
				type : "post",
				data : {
					id : id
				},
				dataType : "json",
				success : function(data) {
					var member = data['member'];
					$("#numberPeriods").val(member.numberPeriods);
					$("#building").val(member.building);
					$("#unit").val(member.unit);
					$("#doorCard").val(member.doorCard);
					$('.selectpicker').selectpicker('refresh');
					$("#status").val(member.status);
					$("#name").val(member.name);
					$("#gender").val(member.gender);
					$("#idCard").val(member.idCard);
					$("#tel").val(member.tel);
					$("#emergencyContact").val(member.emergencyContact);
					$("#emergencyContactTel").val(member.emergencyContactTel);
				}
			});
	 }
	 
	//选中期数加载楼栋
	 function numberPeriodsChange(){
		 var numberPeriods=$("#numberPeriods").val();
		 $.ajax({
				url : "${pageContext.request.contextPath}/selectBuilding",
				type : "post",
				data : {
					numberPeriods : numberPeriods
				},
				dataType : "json",
				success : function(data) {
					var building = data['building'];
					var html = "<option value=''>请选择...</option>";
					for (var i = 0; i < building.length; i++) {
						html += "<option value='"+building[i].building+"'>" + building[i].building + "</option>";
					}
					$("#building").html(html);
				}
			});
	 }
	 //加载单元
	 function buildingChange(){
		 var numberPeriods=$("#numberPeriods").val();
		 var building=$("#building").val();
	     $.ajax({
				url : "${pageContext.request.contextPath}/selectUnit",
				type : "post",
				data : {
					building : building,
					numberPeriods : numberPeriods
				},
				dataType : "json",
				success : function(data) {
					var unit = data['unit'];
					var html = "<option value=''>请选择...</option>";
					for (var i = 0; i < unit.length; i++) {
						html += "<option value='"+unit[i].unit+"'>" + unit[i].unit + "</option>";
					}
					$("#unit").html(html);
				}
			});
	 }
	 
	 //查询房间
	 function unitChange(){
 		var building=$("#building").val();//楼栋
	     var numberPeriods=$("#numberPeriods").val();//期数
	     var unit=$("#unit").val();
	     $.ajax({
				url : "${pageContext.request.contextPath}/selectDoorCard",
				type : "post",
				data : {
					building : building,
					numberPeriods : numberPeriods,
					unit : unit
				},
				dataType : "json",
				success : function(data) {
					var doorCard = data['doorCard'];
					var html = "";
					for (var i = 0; i < doorCard.length; i++) {
						html += "<option value='"+doorCard[i].doorCard+"'>" + doorCard[i].doorCard + "</option>";
					}
					$("#doorCard").html(html);
					$('.selectpicker').selectpicker('refresh');
				}
			});
 	}
	 
	 $("#doorCard").change(function(){
		 console.log($("#doorCard").val());
		 console.log($("#doorCard").find("option:selected").text());
	 })
	
	function insert() {
		var phone=/^1\d{10}$/;
		var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;  
		var status=$("#status").val();
		var numberPeriods=$("#numberPeriods").val();
		var building=$("#building").val();
		var unit=$("#unit").val();
		var doorCard=$("#doorCard").val();
		var name=$("#name").val();
		var gender=$("#gender").val();
		var idCard=$("#idCard").val();
		var tel=$("#tel").val();
		var emergencyContact=$("#emergencyContact").val();
		var emergencyContactTel=$("#emergencyContactTel").val();
		if (name == '' || gender == '' || idCard == ''|| tel == ''||numberPeriods==''||building==''||unit==''||doorCard==''||status=='') {
			layer.alert("数据不完整，请填写!");
			return;
		}
	   
	   	if(reg.test(idCard) === false)  {  
	       layer.alert("身份证输入不合法!");
	       return  false;  
	   	} 
	   	if(phone.test(tel) === false )  {  
	       layer.alert("手机输入不合法!");
	       return  false;  
		}
	   	if(emergencyContactTel !=''){
	   		if(phone.test(emergencyContactTel) === false  )  {  
	 	       layer.alert("手机输入不合法!");
	 	       return  false;  
	 		}
	   	}
		var url =id===''?"${pageContext.request.contextPath}/insertMember":"${pageContext.request.contextPath}/updateMember"
		$.ajax({
			url : url,
			type : "post",
			traditional: true,
			data : {
				id:id,
				status : status,
				numberPeriods : numberPeriods,
				building : building,
				unit : unit,
				doorCard :doorCard,
				name : name,
				gender : gender,
				idCard : idCard,
				tel : tel,
				emergencyContact : emergencyContact,
				emergencyContactTel : emergencyContactTel
			},
			dataType : "json",
			success : function(data) {
				var result = data['result'];
				if (result === 1) {
					layer.msg('操作成功!', {
						icon : 1,
						time : 800
					});
					setTimeout(function() {
						parent.querry();
						parent.layer.close(index);
					}, 1000); 
				} else {
					layer.msg('操作失败!', {
						icon : 2,
						time : 800
					});
					layer.close(loading);
				}
			},
			error : function() {
				layer.msg('系统繁忙，请稍后再试!', {
					icon : 2,
					time : 800
				});
			}
		});
	}
	
</script>
</html>
